<template>
  <div class="settings-section">
    <h2 class="section-title">设置</h2>
    <div class="setting-group">
      <h3>通用配置</h3>
      <div class="setting-item">
        <label for="volume">音量: {{ Math.round(config.volume * 100) }}%</label>
        <input 
          type="range" 
          id="volume" 
          min="0" 
          max="1" 
          step="0.1" 
          :value="config.volume"
          @input="updateVolume"
          @change="updateConfig"
        >
      </div>
      <div class="setting-item">
        <label for="rate">语速: {{ config.rate }}x</label>
        <input 
          type="range" 
          id="rate" 
          min="0.5" 
          max="2" 
          step="0.1" 
          :value="config.rate"
          @input="updateRate"
          @change="updateConfig"
        >
      </div>
      <div class="setting-item">
        <label for="voice">音色</label>
        <select id="voice" :value="config.voice" @change="updateVoice">
          <option value="Microsoft David - English (United States)">英语(美国) - 男声</option>
          <option value="Microsoft Zira - English (United States)">英语(美国) - 女声</option>
          <option value="Google US English">英语 - 标准</option>
        </select>
      </div>
      <div class="setting-item">
        <label>
          <input 
            type="checkbox" 
            :checked="config.randomMode"
            @change="updateRandomMode"
          > 随机播放
        </label>
      </div>
    </div>
    <div class="setting-group">
      <h3>模式设置</h3>
      <div class="mode-settings" :class="{ active: currentMode === 'dictation' }">
        <h4>听写模式</h4>
        <div class="setting-item">
          <label>
            <input 
              type="checkbox" 
              :checked="config.showMeaning"
              @change="updateShowMeaning"
            > 显示中文意思
          </label>
        </div>
        <div class="setting-item">
          <label>
            <input 
              type="checkbox" 
              :checked="config.autoPlay"
              @change="updateAutoPlay"
            > 自动播放下一个
          </label>
        </div>
        <div class="setting-item">
          <label for="interval">播放间隔(秒)</label>
          <input 
            type="number" 
            id="interval" 
            min="1" 
            max="10" 
            :value="config.interval"
            @input="updateInterval"
            @change="updateConfig"
          >
        </div>
      </div>
      <div class="mode-settings" :class="{ active: currentMode === 'repeat' }">
        <h4>跟读模式</h4>
        <div class="setting-item">
          <label>
            <input 
              type="checkbox" 
              :checked="config.repeatWord"
              @change="updateRepeatWord"
            > 重复播放单词
          </label>
        </div>
        <div class="setting-item">
          <label for="repeatCount">重复次数</label>
          <input 
            type="number" 
            id="repeatCount" 
            min="1" 
            max="10" 
            :value="config.repeatCount"
            @input="updateRepeatCount"
            @change="updateConfig"
          >
        </div>
        <div class="setting-item">
          <label for="repeatDelay">重复间隔(秒)</label>
          <input 
            type="number" 
            id="repeatDelay" 
            min="1" 
            max="5" 
            :value="config.repeatDelay"
            @input="updateRepeatDelay"
            @change="updateConfig"
          >
        </div>
      </div>
    </div>
    <div class="setting-group">
      <h3>快捷操作</h3>
      <button class="btn btn-info btn-block" @click="speakCurrentWord">朗读当前单词</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { invoke } from '@tauri-apps/api/core'
import { computed } from 'vue'
import { useDictationStore } from '../composables/useDictation'
import { useFrontendTTS } from '../composables/useFrontendTTS'

const dictationStore = useDictationStore()

// 使用计算属性确保响应性
const config = computed(() => dictationStore.config)
const currentMode = computed(() => dictationStore.currentMode)
const currentWord = computed(() => dictationStore.currentWord)

// 使用前端TTS组件
const { speak } = useFrontendTTS()

// Update functions for each config property
const updateVolume = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.volume = parseFloat(target.value)
}

const updateRate = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.rate = parseFloat(target.value)
}

const updateVoice = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.voice = target.value
}

const updateRandomMode = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.randomMode = target.checked
}

const updateShowMeaning = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.showMeaning = target.checked
}

const updateAutoPlay = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.autoPlay = target.checked
}

const updateInterval = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.interval = parseInt(target.value)
}

const updateRepeatWord = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.repeatWord = target.checked
}

const updateRepeatCount = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.repeatCount = parseInt(target.value)
}

const updateRepeatDelay = (event: Event) => {
  const target = event.target as HTMLInputElement
  config.value.repeatDelay = parseInt(target.value)
}

const updateConfig = async () => {
  try {
    // 更新配置到后端
    await invoke('update_config', { config: config.value })
  } catch (error) {
    console.error('更新配置失败:', error)
    alert('更新配置失败: ' + error)
  }
}

const speakCurrentWord = async () => {
  try {
    // 首先尝试使用前端TTS
    console.log("使用前端TTS朗读单词:", currentWord.value)
    await speak(currentWord.value)
  } catch (error) {
    console.error("前端TTS朗读失败，尝试使用后端TTS:", error)
    try {
      // 如果前端TTS失败，则尝试使用后端TTS
      await ce("speak_word", { word: currentWord.value })
    } catch (backendError) {
      console.error("后端TTS朗读失败:", backendError)
      alert("朗读单词失败: " + backendError)
    }
  }
}
</script>